import PropTypes from 'prop-types'
import React, {memo, useState} from 'react'
import {TabWrapper} from "@/components/section-tabs/style";
import classNames from "classnames";

const SectionTabs = memo((props) => {

    const {tabs = [], tabClick} = props

    const [currentIndex, setCurrentIndex] = useState(0)

    function itemClickHandle(item, index) {
        setCurrentIndex(index)
        tabClick(index, item)
    }

    return (
        <TabWrapper>
            {
                tabs.map((item, index) => {
                    return <div
                        onClick={e => itemClickHandle(item, index)}
                        className={classNames('item', {active: index === currentIndex})}
                        key={index}>{item}</div>
                })
            }
        </TabWrapper>

    )
})

SectionTabs.propTypes = {
    tabs: PropTypes.array,
}

export default SectionTabs